<template>
	<view class="container" v-if="housesList.length != 0">
		<view class="box" v-for="(project,index) in housesList">
			<view class="pix-container" @click="goto('/mainpkg/public_zone_detail/public_zone_detail')">
				<view class="tip">
					<text class="title">{{project.projectName}}</text>
					<text class="area">建筑面积：{{project.area}} m^2</text>
				</view>
				<image src="https://s1.328888.xyz/2022/09/26/sOMMn.png" class="pix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryObj: {
					"pageNum": 1.,
					"pageSize": 10,
					"queryBean": {
						businessId: uni.getStorageSync('estateId')
					},
				},
				housesList: [],
				total: 0,
				//是否正在请求数据
				isLoading: false
			};
		},
		onLoad() {
			this.getHouseList()
		},
		methods: {
			//获取房屋列表数据
			async getHouseList(cb) {
				this.isLoading = true
				const {
					data: res
				} = await uni.$http.post(uni.$http.baseURL + '/estateManage/getEstateInfoList', this.queryObj)
				cb && cb()

				if (res.status == 0) {
					this.isLoading = false
					//数据请求完毕，使用回调关闭下拉刷新
					// if (res.meta.status !== 200) return uni.$showMsg()
					this.housesList = [...this.housesList, ...res.body.data]
					this.total = res.body.totalSize
				} else {
					uni.$showMsg(res.message)
				}
			},
			//触底事件
			onReachBottom() {
				//判断是否还有下条数据
				if (this.queryObj.pageSize * this.queryObj.pageNum >= this.total) return uni.$showMsg('已加载完所有数据！')
				//节流
				if (this.isLoading) return
				this.queryObj.pageNum += 1
				this.getHouseList()
			},
			//下拉刷新时间
			onPullDownRefresh() {
				this.queryObj.pageNum = 1
				this.total = 0
				this.isLoading = false
				this.housesList = []
				this.getHouseList(() => uni.stopPullDownRefresh())
			},
			goto(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 30rpx;

		.box {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;

			.pix-container {
				.tip {
					position: absolute;
					display: flex;
					flex-direction: column;
					color: #FFFFFF;
					text-align: center;
					margin-left: 60rpx;
					margin-top: 89rpx;

					.title {
						font-size: 48rpx;
						font-weight: bold;
					}

					.area {
						margin-top: 20rpx;
						font-size: 24rpx;
						font-weight: 500;
					}
				}

				.pix {
					width: 335rpx;
					height: 260rpx;
				}
			}
		}

	}
</style>
